<body>
<link rel="stylesheet" href="basics.css">
<style>
    .dropzone {
        width: 200px;
        height: 200px;
        background: #eee;
        margin: 20px;
        padding: 20px;
        border: 1px solid #ccc;
        position: absolute;
    }
    #zone-1 {
        top: 120px;
    }
    #zone-2 {
        top: 120px;
        left: 250px;
    }
    #zone-3 {
        top: 370px;
    }
    #zone-4 {
        top: 370px;
        left: 250px;
    }
    #zone-1.ds-dropzone-ready {
        background: #cfc;
    }
    #zone-2.ds-dropzone-ready {
        background: #ccf;
    }
    #zone-3.ds-dropzone-ready {
        background: #fcc;
    }
    #zone-4.ds-dropzone-ready {
        background: hotpink;
    }
    .ds-droppable {
        color: red;
    }
    .ds-droppable-zone-1 {
        background: #cfc;
    }
    .ds-droppable-zone-2 {
        background: #ccf;
    }
    .ds-droppable-zone-3 {
        background: #fcc;
    }
    .ds-droppable-zone-1.ds-droppable-zone-2.ds-droppable-zone-3.ds-droppable-zone-4 {
        background: orange;
    }
    .ds-dropped-target {
        background: gold;
    }
    .ds-dropzone-target {
        background: gold;
    }
    .ds-dropped-target::before {
    content: 'dropped';
    position: absolute;
    bottom: 0;
    }
    .ds-dropped-inside::after {
    content: 'inside';
    position: absolute;
    top: 0;
    }

</style>
<script src="../../dist/DragSelect.js"></script>
<p>Draggable</p>
<button id="item-1" class="item one">1</button>
<button id="item-2" class="item two">2</button>
<button id="item-3" class="item three">3</button>
<button id="item-4" class="item four">4</button>
<p>Droppable</p>
<div id="zone-1" class="dropzone one"></div>
<div id="zone-2" class="dropzone two"></div>
<div id="zone-3" class="dropzone three"></div>
<div id="zone-4" class="dropzone four"></div>
<script>
    window.dropTarget = null
    window.ds = new DragSelect({
        selectables: document.querySelectorAll('.item'),
        dropZones: [
            { element: document.querySelector('#zone-1'), id: 'zone-1', droppables: document.querySelectorAll('#item-1,#item-4') },
            { element: document.querySelector('#zone-2'), id: 'zone-2', droppables: document.querySelectorAll('#item-2,#item-4') },
            { element: document.querySelector('#zone-3'), id: 'zone-3', droppables: document.querySelectorAll('#item-3,#item-4') },
            { element: document.querySelector('#zone-4'), id: 'zone-4' },
        ],
    });
    ds.subscribe('DS:end', ({ isDragging, items, dropTarget }) => {
        const newDropTarget = {
            id: dropTarget?.id,
            element: dropTarget?.element?.id,
            droppables: dropTarget?.droppables?.map(item => item.id),
            itemsDropped: dropTarget?.itemsDropped?.map(item => item.id),
            itemsInside: dropTarget?.itemsInside?.map(item => item.id),
        }
        window.dropTarget = newDropTarget
    })
</script>
</body>
